<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	

	var Geometry1 = new Object();
	Geometry1.vertices = new Float32Array([0, 0.5,   -0.5, -0.5,   0.5, -0.5]);
	Geometry1.pnum =2;
	Geometry1.n = Geometry1.vertices.length / Geometry1.pnum;
	Geometry1.VSHADER_SOURCE =
	'attribute vec4 a_Position;'+
	//'uniform vec4 u_Translation;'+
	'uniform mat4 a_mat;'+
	'void main(){'+
	'gl_Position =  a_mat * a_Position;'+
	'gl_PointSize = 10.0;'+
	'}';

	Geometry1.FSHADER_SOURCE =
	'void main(){'+
	'gl_FragColor = vec4(1.0,0.0,0.0,1.0);'+
	'}';

    Geometry1.mat = new Matrix4();

   Geometry1.initVertexBuffers = function(gl){
		this.vertexBuffer = gl.createBuffer();
		if(!this.vertexBuffer){
			alert('createBuffer fail');
			return false;
		}
		this.n  =  this.vertices.length / this.pnum;
		return true
	}


    Geometry1.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry1 createProgram fail')
			return;
		}

    	this.a_mat = gl.getUniformLocation(this.program,'a_mat');	
		if (this.a_mat < 0) {
			alert('uniform Geometry1.a_mat fail');
			return false;
		}
    	this.a_Position = gl.getAttribLocation(this.program,'a_Position');
		if(this.a_Position <0){
			alert('attribute fail')
			return false;
		}
		return true;
    }

	Geometry1.draw = function(gl,frames){
		gl.useProgram(this.program);
		gl.bindBuffer(gl.ARRAY_BUFFER,this.vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);
		gl.enableVertexAttribArray(this.a_Position);
		gl.vertexAttribPointer(this.a_Position,this.pnum,gl.FLOAT,false,0,0);


		this.mat.setRotate(1,1,1,0);
		this.mat.rotate((frames%360),0,0,1);
		this.mat.scale(0.04 * (frames % 50) ,0.04*(frames % 50) ,0.04 *(frames % 50))
		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);
		gl.drawArrays(gl.TRIANGLES,0,this.n);
	}


	var Geometry2= new Object();
	Geometry2.vertices = new Float32Array([0, 0.1,   -0.1, -0.1,   0.1, -0.1]);
	Geometry2.pnum =2;
	Geometry2.n = Geometry2.vertices.length / Geometry2.pnum;
	Geometry2.VSHADER_SOURCE =
	'attribute vec4 a_Position;'+
	//'uniform vec4 u_Translation;'+
	'uniform mat4 a_mat;'+
	'void main(){'+
	'gl_Position =  a_mat * a_Position;'+
	'gl_PointSize = 10.0;'+
	'}';
	Geometry2.FSHADER_SOURCE =
	'void main(){'+
	'gl_FragColor = vec4(0.0,1.0,0.0,1.0);'+
	'}';


	 Geometry2.initVertexBuffers = function(gl){
		this.vertexBuffer = gl.createBuffer();
		if(!this.vertexBuffer){
			alert('createBuffer fail');
			return false;
		}
		
		this.n  =  this.vertices.length / this.pnum;
		return true
	}


    Geometry2.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry1 createProgram fail')
			return;
		}

    	this.a_mat = gl.getUniformLocation(this.program,'a_mat');	
		if (this.a_mat < 0) {
			alert('uniform Geometry1.a_mat fail');
			return false;
		}
    	this.a_Position = gl.getAttribLocation(this.program,'a_Position');
		if(this.a_Position <0){
			alert('attribute fail')
			return false;
		}
		return true;
    }
	Geometry2.mat = new Matrix4();
	Geometry2.draw = function(gl,frames){
		gl.useProgram(this.program);

		gl.bindBuffer(gl.ARRAY_BUFFER,this.vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);
		gl.enableVertexAttribArray(this.a_Position);
		gl.vertexAttribPointer(this.a_Position,this.pnum,gl.FLOAT,false,0,0);

		this.mat.setRotate(1,1,1,0);
		this.mat.rotate((frames%360),0,0,1);

		//this.mat.scale(0.04 * (frames % 50) ,0.04*(frames % 50) ,0.04 *(frames % 50))
		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);
		gl.drawArrays(gl.TRIANGLES,0,this.n);
	}

	function start () {
		var canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}

		if(!Geometry1.initShader(gl)){
			alert('Geometry1 initShaderParm fail')
			return;
		}

		if (!Geometry1.initVertexBuffers(gl)){
			alert('Geometry1 initVertexBuffers fail');
			return;
		}

		if(!Geometry2.initShader(gl)){
			alert('Geometry2 initShaderParm fail')
			return;
		}

		if (!Geometry2.initVertexBuffers(gl)){
			alert('Geometry2 initVertexBuffers fail');
			return;
		}


		var frames = 0
		function renderer(){
			frames++;
			render(gl,frames);
			requestAnimationFrame(renderer)
		}
		renderer()
	}

	function render(gl,frames){
		gl.clearColor(0,0,0,1);
		gl.clear(gl.COLOR_BUFFER_BIT);
		Geometry1.draw(gl,frames);
		Geometry2.draw(gl,frames);		
	}



</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>